<template>
 <div class="logincom">
    <div class="d1">
         <form @submit.prevent="login()">
        <h1>登陆界面</h1>
       <p>账号：<input type="text" class="i1" required v-model="username"></p> 
       <p>密码：<input type="password" class="i2" required v-model.lazy.trim="pwd"></p> 
       <br>
   
        <!--可选功能：如果勾选，在浏览器内保存上一次的登陆账号，如果没有勾选.不保存登录信息的同时还要清除上一次记录的数据-->
       <div class="d2">
       <p class="p1"><input type="checkbox"  v-model="isRem" class="i3">记住密码</p>
       <button class="b2" @click="b2()">注册</button>
       
       </div>
     
       
       
       
        <input type="submit" class="b1" value="登录">
       
       
       </form>
    </div>
  </div>
</template>



<script>
import { mapState} from 'vuex'
export default {
    name:"LoginCom",
   
    //存储组件的数据
    data(){
        return{
            username:'',//用v-model将输入框的value值直接赋值给username变量
            tel:'',
            pwd :'',
            isRem:false,//false:默认不勾选
        }
    },
    //加载完成之后
    mounted(){
       //上一次登录时记住密码的状态
       let isremember=localStorage.getItem('loginRem') 
       console.log(isremember)//字符串数据/null;
       
    //    //判断上一次是否记住密码
    //    if(isremember=='true'){
    //     //上一次记住密码，从存储内提取上一次的数据
    //     this.username=localStorage.getItem('loginuser');
    //     this.pwd=localStorage.getItem('loginpwd');
    //     this.isRem=true;
    //    }else{
    //     //上一次没有记住密码，不显示数据
    //     this.username='';
    //     this.pwd='';
    //     this.isRem=false;
    //    }
       this.username=isremember=='true'? localStorage.getItem('loginuser'):'';
       this.pwd=isremember=='true'? localStorage.getItem('loginpwd'):'';
       this.isremember=isremember=='true'? true:false;


    },
    //methods对象:存储事件函数
    methods:{
         ...mapState[('user')],
        //登录函数
         //登录函数，从vuex里面获取注册的数据；根据手机号码/邮箱和密码查找对应的用户，完成登录并存储信息
        login(){
           
            //根据输入框输入的账号和密码。如果输入的数据跟上面数组中任意一组数组匹配，我们认为登录成功：
            // 1.记录登录状态到会话存储sessionStorage
            // 2.跳转到首页

            //循环遍历
        //      user.forEach(item => {
        //      if(this.username==item.username&&item.pwd==this.pwd){
        //         sessionStorage.setItem('islogin','true');
        //        //编程式导航
        //         this.$router.push('/home');
        //         //终止循环
        //         return;
        //      }else{
        //         //弹窗提示
        //         alert('登录失败')
        //      }
        //  });

        //过滤函数filter：设置一个过滤条件，如果有符合的数据存储到新数组内
        let result =this.$store.state.user.filter(item =>{
            //return 出过滤的条件（判断条件）
            return item.username==this.username&&item.pwd==this.pwd
             
        });       
        console.log(result);
        //判断是否成功
        if(result.length>0){
            //在登陆成功的前提下，判断是否需要记住密码
            if(this.isRem){
                //本地存储记录本次登陆成功的账号和密码
                localStorage.setItem('loginuser',this.username);
                localStorage.setItem('loginpwd',this.pwd);
                localStorage.setItem('loginRem',this.isRem);
            }else{
                //将上一次存储到本地存储的登录账号和密码、上一次记录密码的状态进行清除
            localStorage.clear();
          }
          sessionStorage.setItem('islogin',this.username)
         this.$router.push('/home');     
        }else{
            alert('登录失败')
        }
        
        },
        b2(){
         this.$router.push('/zhu');     

        }
        
    }
    
}
</script>

<style scoped>
.logincom{
    width: 100%;
    height: 98vh;
    overflow: hidden;
    display: flex;
    align-content: center;
}

.d1{
    background-color: rgb(22, 201, 233);
    text-align: center;
    margin: auto;
    height: 350px;
    width: 300px;
    border: red solid;
    display: flex;
    flex-direction: column;

}
.d1 h1{
    margin-top: 30px;
}
.d1 .i1,.i2{
    margin-top: 40px;
    border-radius: 5px;
    border: none;
    height: 30px;
    width: 200px;
}
.d1 .i3{
    margin-right: 10px;
}
.d1 .p1{
    margin-top: -5px;
    margin-right: 100px;
    margin-left: 25px;
    margin-bottom: 20px;
}

.d1 .b1{
 border-radius: 5px;
    border: none;
    height: 30px;
    width: 245px;
    margin-left:8px ;
}
.d1 .b2{
 border-radius: 5px;
    border: none;
    height: 20px;
    width: 50px;
    margin-left:5px ;
    background-color: green;
}
.d2{
    display: flex;
}
</style>